<template>
    <div class="header-container">
        <div class="l-content">
            <el-button @click="handleMenu" icon="el-icon-menu" size="mini"></el-button>
            <!-- 面包屑 -->
            <el-breadcrumb separator="/">

                <el-breadcrumb-item v-for="item in tags" :key="item.path" :to="{ path: item.path }">{{ getRouteIcons[item.name].name }}
                </el-breadcrumb-item>
            </el-breadcrumb>
        </div>
      <div class="but-class-group" style="    width: 100px;
    position: absolute;
    display: flex
;
    flex-direction: row;
    left: 80%;">

          <template  >
            <i class="iconfont icon-task" @click="showTimeMethod" ></i>
          </template>
        <div style="position: relative;">


<template  >
            <i class="iconfont icon-duoyun" @click="showWeater" ></i>
          </template>
      </div>
        <div v-if="showWeateFlog" class="weather-class">
          <el-select clearable  @change="changeWeather" filterable :allow-create="true" v-model="value" placeholder="请选择">
            <el-option
                v-for="(item,keys) in getCity"
                :key="item"
                :label="keys"
                :value="item">
              <span style="float: left">{{ keys }}</span>
              <span style="float: right; color: #8492a6; font-size: 13px">{{ item }}</span>
            </el-option>
          </el-select>


        </div>
          <template  >
            <i class="iconfont icon-gonggaoguanli"   @click="noticety"></i>
          </template>


          <template  >
            <i class="iconfont icon-delChangeColor" @click="showColorsMethod" ></i>
          </template>

      </div>
      <div v-if="showTime" class="time_class">
        <el-calendar v-model="timeValue">
        </el-calendar>
      </div>
      <div  v-if="showColors"  class="color_class">
        <el-color-picker  @change="modifyColor" v-model="color2">
        </el-color-picker>
      </div>

      <div>
      <el-drawer
          title="个人信息"
          :visible.sync="drawer"
          :direction="'rtl'"
          :before-close="handleClosePerson"
          class="user-info-drawer">

        <div class="user-profile">
          <!-- 头像区域 -->
          <div class="avatar-section">
<!--            userInfo.head_url || 'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png'-->
            <el-avatar
                :size="120"
                src="https://img.keaitupian.cn/uploads/2020/12/08/273813a415dbe086179ec092b693e8bb.jpg"
                class="user-avatar">
            </el-avatar>
            <div class="user-status">
              <el-tag :type="userInfo.status === 1 ? 'success' : 'danger'" size="medium">
                {{ userInfo.status === 1 ? '已启用' : '已禁用' }}
              </el-tag>
            </div>
          </div>

          <!-- 基本信息 -->
          <div class="info-section">
            <h3 class="info-title">基本信息</h3>
            <el-descriptions :column="1" border>
<!--              {{getUserInfo}}-->
              <el-descriptions-item label="用户名">{{ getUserInfo.username }}</el-descriptions-item>
              <el-descriptions-item label="姓名">{{getUserInfo.username }}</el-descriptions-item>
              <el-descriptions-item label="手机号">
                <el-tag v-if="userInfo.phone" type="info">{{ userInfo.phone }}</el-tag>
                <span v-else>未设置</span>
              </el-descriptions-item>
              <el-descriptions-item label="创建时间">{{ formatTime(userInfo.create_time) }}</el-descriptions-item>
              <el-descriptions-item label="更新时间">{{ formatTime(userInfo.update_time) }}</el-descriptions-item>
            </el-descriptions>
          </div>

          <!-- 其他信息 -->
          <div class="info-section">
            <h3 class="info-title">其他信息</h3>
            <el-descriptions :column="1" border>
              <el-descriptions-item label="部门">
                {{ getDeptName(userInfo.dept_id) || '未分配' }}
              </el-descriptions-item>
              <el-descriptions-item label="岗位">
                {{ getPostName(userInfo.post_id) || '未分配' }}
              </el-descriptions-item>
              <el-descriptions-item label="个人描述">
                <div class="description-text" v-if="userInfo.description">
                  {{ userInfo.description }}
                </div>
                <span v-else>暂无描述</span>
              </el-descriptions-item>
            </el-descriptions>
          </div>

          <!-- 操作按钮 -->
          <div class="action-buttons">
            <el-button type="primary" icon="el-icon-edit" @click="handleEdit">编辑信息</el-button>
            <el-button type="warning" icon="el-icon-refresh" @click="handleResetPassword">重置密码</el-button>
          </div>
        </div>
      </el-drawer>

</div>
      <div class="r-content">
            <el-dropdown @command="handleClick">
<!--                el-menu-vertical-demo-->

              <span class="el-dropdown-link">
                    <img class="user" src="../assets/images/user.png" alt="">
                </span>
              <template v-if="getShowColor">
                <el-color-picker   @change="modifyColor" v-model="color1"></el-color-picker>
              </template>
              <el-dropdown-menu slot="dropdown">
                 <el-button  type="circle" @click="ShowPerson" size="mini" icon="el-icon-circle-plus-outline" >个人信息</el-button>
                <div></div>
                   <el-button type="circle" @click="ShowColorBack" size="mini" icon="el-icon-circle-plus-outline" >修改头部背景</el-button>
                    <el-dropdown-item command="logout">退出</el-dropdown-item>
                </el-dropdown-menu>
            </el-dropdown>
        </div>
    </div>
</template>

<script>
import {mapGetters, mapState} from 'vuex'
import Cookie from 'js-cookie'
import {mapActions} from "vuex";
import {routeIcons} from "@/router/routeLabel";
const  city = require('@/utils/city')
import  {getCityData} from '@/utils/weater'
import moment from "moment";
export default {
  data() {
    return {
      color1: '#fff',
      drawer:false,
      color2:'#c57575',
      showColor: false,
      showColors:false,
      timeValue:new Date(),
      showTime:false,
      value:'',
      showWeateFlog:false,
      drawerVisible: false,
      userInfo: {
        id: 1231123131314,
        username: 'admin',
        name: '张三',
        phone: '13800138000',
        description: '系统管理员，负责用户管理和权限分配',
        status: 1,
        head_url: 'https://example.com/avatar.jpg',
        dept_id: 1,
        post_id: 1,
        create_time: '2023-05-15 10:30:45.123456',
        update_time: '2023-06-20 14:25:30.654321'
      },
      deptList: [
        { id: 1, name: '技术部' },
        { id: 2, name: '市场部' }
      ],
      postList: [
        { id: 1, name: '系统管理员' },
        { id: 2, name: '开发工程师' }
      ]
    }
  },
  watch: {
    color1: {
      immediate: true,
      deep: true,
      handler(newValue, oldValue) {
        if (newValue) {
          document.querySelector('.header-container').style.cssText=`background-color: ${newValue};`
        }else {
          document.querySelector('.header-container').style.cssText=`background-color: ${oldValue};`
        }

      }
    },
    color2:{
      immediate: true,
      deep: true,
      handler(newValue, oldValue) {
        document.querySelector('.header-container').style.cssText=`background-color: ${newValue};`
          // document.querySelector('.el-menu-vertical-demo').style.cssText=`background-color: ${newValue};`
        // document.querySelector(".el-submenu__title").style.cssText=`background-color: ${newValue};`

      }
    },
  },
    methods: {
    searchWeather(city){
      // url = "http://www.weather.com.cn/data/cityinfo/" + citycode + ".html"
    },
      handleClosePerson(done) {
        this.$confirm('确定关闭个人信息面板吗?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          done()
        }).catch(() => {})
      },

      formatTime(time) {
        return time ? moment(time).format('YYYY-MM-DD HH:mm:ss') : '--'
      },

      getDeptName(deptId) {
        const dept = this.deptList.find(item => item.id === deptId)
        return dept ? dept.name : ''
      },

      getPostName(postId) {
        const post = this.postList.find(item => item.id === postId)
        return post ? post.name : ''
      },

      handleEdit() {
        this.$message.info('编辑功能待实现')
      },

      handleResetPassword() {
        this.$confirm('确定要重置该用户的密码吗?', '重置密码', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$message.success('密码已重置为默认密码')
        }).catch(() => {})
      },
      ShowPerson()
      {
     this.drawer = true;
      },
    noticety()
    {
      const h = this.$createElement;

      this.$notify({
        title: '代驾系统',
        message: h('i', { style: 'color: teal'}, '欢迎访问该系统！！！该系统主要用于代驾系统的数据管理')
      });
    },
      showColorsMethod()
      {
        this.showColors = !this.showColors;
        const  _this =this;
        window.setTimeout(() => {
          _this.showColors = false
        },8000)
      },
      showTimeMethod()
      {
        this.showTime  =!this.showTime
      },
      ShowColorBack() {
        this.showColor = !this.showColor
        const  _this =this;
        window.setTimeout(() => {
          _this.showColor = false
        },10000)
      },
      modifyColor(clolr)
      {

      },
      handleClose(done)
      {
          this.$confirm('确认关闭').then(()=>{
            done()
          }).catch()
      },
      ...mapActions(['setToken']),
        handleMenu() {
            // 相当于调用这个方法
            this.$store.commit('CollapseMenu')
        },
        handleClick(command) {
      // confirm('确定需要退出吗').
          this.$confirm('确定退出吗','退出提示', {
            type: 'warning',
            message:'确定退出吗退出之后需要重新登录',
            center: true,
        }).then((res)=>{
            if (command === 'logout') {

              Cookie.remove('token')
              localStorage.removeItem('token')
              localStorage.removeItem("userInfo");
              this.setToken(null)
              this.$router.push('/login')
            }
          }).catch(err=>{

          })

        },
      showWeater()
      {

        this.showWeateFlog  =!this.showWeateFlog
      },
      changeWeather(value)
      {

        this.showWeateFlog =  false
        // alert(value)
        const h = this.$createElement;
        // url = "http://www.weather.com.cn/data/cityinfo/" + value + ".html"
        // https://e.weather.com.cn/mweather/101010100.shtml
        // https://e.weather.com.cn/mweather/101010100.shtml
        const  url  =  `https://e.weather.com.cn/mweather/${value}.shtml`
        // https://e.weather.com.cn
        window.open(url, '_blank');
        // getCityData(url).then(res => {
        //   console.log(res)
        // }).catch(err => this.$message.success(err.message)
        // )
        // this.$notify({
        //   title: '天气查询',
        //   position:'top-left',
        //   type:'success',
        //   message: h('div', { style: 'color: teal'}, '欢迎访问该系统！！！该系统主要用于代驾系统的数据管理')
        // });

      }
    },
    computed: {
    ...mapGetters(['getUserInfo']),
    getCity:()=>(city),
      getRouteIcons() {
        return routeIcons
      },
        ...mapState({
            tags: state => state.tab.tabList
        }),
      getShowColor() {
        return this.showColor
      }
    }
}
</script>

<style lang="less" scoped>
i{
 color: #409EFF;
  cursor: pointer;
}
.but-class-group button{
   //background-color: transparent;
}
.iconfont{
  font-size: 30px;
  margin-left: 20px ;
}
.header-container {
    background-color: #333;
    height: 60px;

    // 让按钮和头像居中
    display: flex;
    justify-content: space-between;
    align-items: center;
    // 不要紧贴边框
    padding: 0 20px;

    .el-dropdown-link {
        cursor: pointer;
        color: #409EFF;

        .user {
            width: 40px;
            height: 40px;
            // 50%变圆形
            border-radius: 50%;
        }
    }
}

.l-content {
    display: flex;
    // 上下居中
    align-items: center;

    .el-breadcrumb {
        margin-left: 15px;

        // deep 强制生效
        /deep/.el-breadcrumb__item {
            .el-breadcrumb__inner {
                &.is-link {
                    color: #666;
                }
            }

            &:last-child {
                .el-breadcrumb__inner {
                    color: #fff;
                }
            }
        }
    }
}
.time_class{
  position: absolute;
  top: 50px;
  z-index: 100;
  width: 30%;
  left:70%;
  background-color: #409EFF;
}
.time_class .el-calendar {
  background-image: url("../assets/images/img.png");
  background-repeat: no-repeat;
  background-size: contain;
  height: 300px;
  opacity:1 ;
  overflow: auto; /* 确保设置为auto而不是hidden */

  /* 确保滚动条可见的额外样式 */
  scrollbar-width: none; /* 对于Firefox */
  //scrollbar-color: #888 #f1f1f1; /* 对于Firefox */
}

/* 针对Webkit浏览器（Chrome, Safari等）的滚动条样式 */
.time_class .el-calendar::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

.time_class .el-calendar::-webkit-scrollbar-thumb {
  background-color: #888;
  border-radius: 4px;
}

.time_class .el-calendar::-webkit-scrollbar-track {
  background-color: #f1f1f1;
  border-radius: 4px;
}
.color_class{
  position: absolute;
  left: 90%;
  top: 50px;
}
.weather-class{
  position: absolute;
  top: 50px;
  left: 35px;
  width: 200px;
  overflow: auto;
  scrollbar-width: none;
  z-index: 99;
  background: linear-gradient(45deg, #d5c6c6 0%, #d3d3d8 100%);
}
.weather-class ol {
  margin: 0;
  padding: 0;
}
.weather-class ol >li:nth-of-type(odd){
  background-color: #409EFF;
}
.el-dropdown-menu button{
  border:  0 ;
}
.user-info-drawer {
  .el-drawer__header {
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 1px solid #f0f0f0;
    color: #333;
    font-size: 18px;
    font-weight: bold;
  }

  .user-profile {
    padding: 0 20px;
  }

  .avatar-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 25px;

    .user-avatar {
      border: 3px solid #f0f0f0;
      margin-bottom: 10px;
    }

    .user-status {
      margin-top: 8px;
    }
  }

  .info-section {
    margin-bottom: 25px;

    .info-title {
      color: #666;
      font-size: 16px;
      margin-bottom: 15px;
      padding-left: 8px;
      border-left: 3px solid #409EFF;
    }

    .description-text {
      line-height: 1.6;
      color: #666;
    }
  }

  .action-buttons {
    display: flex;
    justify-content: center;
    margin-top: 30px;
    gap: 15px;
  }
}
</style>